<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	<link href="https://blog-questions.googlecode.com/git/version1/code-creator/css/styles.css" rel="stylesheet"/>
        

        <title>Blog question creator</title>

	<link href="https://blog-questions.googlecode.com/git/version1/question-1.0.css" type="text/css" rel="stylesheet">
 	<script type="text/javascript" src="https://blog-questions.googlecode.com/git/version1/question-1.0.js"></script>

        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://blog-questions.googlecode.com/git/version1/code-creator/js/scripts.js"></script>

    </head>

    <body>

        <div class="thin container">

            <div id="top">
                <h1>Blogger question creator</h1>
            </div>

            <div id="middle">

		<form role="form" class="form-horizontal" id="questionform">
			<fieldset id="question">
				<legend>Question</legend>
				<div class="form-group">
					<label for="postquestion" class="col-sm-3 control-label">Question:</label>
					<div class="col-sm-9">
						<textarea cols="55" rows="4" name="question" class="form-control" id="postquestion" placeholder="insert question"></textarea>
					</div>
			
				</div>
			</fieldset>
			<fieldset id="answers">
				<legend>Answers</legend>
				<div class="form-group">
					<label for="answer1" class="col-sm-3 control-label">Answer 1:</label>
					<div class="col-sm-9">
						<textarea name="answer1" cols="55" rows="4" class="form-control" id="answer1" placeholder="insert answer"></textarea>
					</div>
				</div>
				<div class="form-group">
					<label for="answer2" class="col-sm-3 control-label">Answer 2:</label>
					<div class="col-sm-9">
						<textarea name="answer2" cols="55" rows="4" class="form-control" id="answer2" placeholder="insert answer"></textarea>
					</div>
				</div>
			</fieldset>
			<div class="form-group">
				<div id="answerscontrols" class="col-sm-offset-2 col-sm-10">
						<a title="Remove answer" href=""><span class="glyphicon glyphicon-minus"></span></a>
						<a title="Add answer" href=""><span class="glyphicon glyphicon-plus"></span></a>
				</div>
			</div>
			
			<fieldset id="definitions">
				<legend>Correctness</legend>
				<div class="form-group">
      					<label for="correct" class="col-sm-3 control-label">Correct:</label>
					<div class="col-sm-9">
      						<select class="form-control">
         						<option value="0">Answer 1</option>
							<option value="1">Answer 2</option>
      						</select>
					</div>
				</div>
				<div class="form-group">
      					<label for="submissions" class="col-sm-3 control-label">Max tries:</label>
					<div class="col-sm-9">
      						<select class="form-control">
         						<option value="1">1 submission</option>
      						</select>
					</div>
				</div>
			</fieldset>
			<fieldset id="explanation">
				<legend>Explanation (optional)</legend>
				<div class="form-group">
					<label for="explanation" class="col-sm-3 control-label">Explanation:</label>
					<div class="col-sm-9">
						<textarea name="explanation" cols="55" rows="4" class="form-control" id="explanation" placeholder="insert explanation (optional)"></textarea>
					</div>
				</div>
			</fieldset>
			<fieldset id="submit">
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-9">
						<button type="submit" class="btn btn-primary">Create question</button>
					</div>
				</div>
			</fieldset>

		</form>

		<h3>Question code for your blog:</h3>

		<div id="code"></div>

		<h3>This is how your question will show up. Try it!</h3>
		<div class="question" id="question1"></div>

		            </div>

            <div id="bottom">
                Copyright &#169; Rui Nunes
            </div>

        </div>

    </body>

</html>
